import React, { useState } from 'react'
import JSONBuilder, { JSONSchema } from '../apps/json_builder'
import { Col, Row } from 'antd'

const DemoJSONBuilder = () => {
    const [schema, updateSchema] = useState<JSONSchema>({
        "$schema": "http://json-schema.org/draft-04/schema#",
        "type": "object",
        "properties": {
            "eee": {
                "type": "object",
                "properties": {
                    "field_6": {
                        "type": "string"
                    }
                }
            },
            "field_5": {
                "type": "array",
                "items": {
                    "type": "object",
                    "properties": {}
                }
            }
        }
    })

    return <Row style={{ padding: '20px' }}>
        <Col span={18}>
            <JSONBuilder schema={schema} onChange={updateSchema}/>
        </Col>
        <Col span={6}>
            <pre><code className="language-json">{JSON.stringify(schema, null, 2)}</code></pre>
        </Col>
    </Row>
}

export default DemoJSONBuilder